<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="javascript:void(0)"><img src="/WaterMarkingWebsite/assets/images/Logo.png" style="width:30px"></a>
  <!-- /WaterMarkingWebsite -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse text-light" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active" *ngIf="loginService.email">
        <a class="nav-link" href="javascript:void(0)" routerLink="/main">Watermarking Website</a>
      </li>
    </ul>
    <span *ngIf="loginService.email" class="mr-3">{{loginService.name}}</span>
    <button *ngIf="loginService.email" class="btn btn-primary my-2 my-sm-0 mr-3" routerLink="/manipulate/audio">Distort Audio</button>
    <button *ngIf="loginService.email" class="btn btn-primary my-2 my-sm-0 mr-3" routerLink="/decode/audio">Decode</button>
    <button *ngIf="!loginService.email" class="btn btn-primary my-2 my-sm-0" routerLink="/login">Login</button>
    <button *ngIf="loginService.email" class="btn btn-primary my-2 my-sm-0" (click)="loginService.logout()">Logout</button>
  </div>
</nav>